import React from "react";
import {Text, View} from "react-native";
import FormStyle from "../style/form-style";
import RadioBox from "../../common/radio-box";

export default class FormRadioGroupWidget extends React.Component {

    _onSelectedChange(item) {

        // if (this.props.selectedItem) {
        if (item === this.props.selectedItem) {
            return;
        }
        // }

        if (this.props.onSelectedChange) {
            this.props.onSelectedChange(item);
        }
    }

    _getCheckBox(item) {
        return (
            <RadioBox key={item.id} style={{width: '50%'}}
                      name={item.name}
                      checked={this.props.selectedItem ? item.id === this.props.selectedItem.id : false}
                      onClick={() => this._onSelectedChange(item)}/>
        )
    }

    render() {
        return (
            <View style={[FormStyle.row, {flexDirection: 'column', alignItems: 'stretch'}, this.props.style]}>
                <Text style={FormStyle.rowLeft}>
                    {this.props.name}
                </Text>
                <View style={[FormStyle.rowRight, {flexDirection: 'row', flexWrap: 'wrap', marginTop: 6}]}>
                    {
                        this.props.options.map((item, index) => {
                            return this._getCheckBox(item)
                        })
                    }
                </View>
            </View>
        )
    }
}
